<template>
  <div class="add-package base-main">
    <van-cell-group>
      <van-field
        v-model="packageName"
        label="套餐名称"
        placeholder="请填写套餐名称"
        clearable
        :error-message="errPackageName"
      />
      <van-field
        v-model="packageTime"
        label="按摩时长"
        type="number"
        placeholder="分钟"
        clearable
        :error-message="errPackageTime"
      >
        分钟
      </van-field>
      <van-field
        v-model="packagePrice"
        label="套餐价格"
        placeholder="0.00元"
        clearable
        :error-message="errPackagePrice"
      />
    </van-cell-group>
    <div class="save-btn">
      <baseBtn
        :txt="txt"
        @handleClick="handleSub"
      />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import baseBtn from '../../components/BaseBtn.vue'
  export default {
    components: {
      baseBtn
    },
    data() {
      return {
        packageName: '', // 套餐名称
        packageTime: '', // 按摩时长
        packagePrice: '', // 套餐价格
        errPackageName: '', //
        errPackageTime: '', //
        errPackagePrice: '', //
        txt: '保存',
      }
    },
    watch: {
      packageName(newV, oldV) {
        if(newV.length > 0) {
          this.errPackageName = ''
        }
      },
      packageTime(newV, oldV) {
        if(newV.length > 0) {
          this.errPackageTime = ''
        }
      },
      packagePrice(newV, oldV) {
        if(newV.length > 0) {
          this.errPackagePrice = ''
        }
      },
    },
    methods: {
      handleSub() {
        if(this.packageName == '') {
          this.errPackageName = '请填写套餐名称'
          return false
        } else if(this.packageTime == '') {
          this.errPackageTime = '请填写按摩时长'
          return false
        } else if(this.packagePrice == '') {
          this.errPackagePrice = '请填写套餐价格'
          return false
        } else {
          console.log('tijao')
        }
      }
    },
  }
</script>

<style scoped>
  @import "../../assets/css/base.scss";
.add-package .save-btn{margin-top: 20px;padding:0 15px;box-sizing: border-box}
</style>
